<template>
  <div class="p-16px">
    <el-card>
      <el-space wrap :size="16">
        <div class="flex items-center whitespace-nowrap">
          设备编号：
          <el-input
            v-model="params.deviceId"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          设备名称：
          <el-input
            v-model="params.deviceName"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          硬件编号：
          <el-input
            v-model="params.hardwareId"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          故障原因：
          <el-input
            v-model="params.errorReason"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="flex items-center whitespace-nowrap">
          时间：
          <el-date-picker
            v-model="params.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="handleExport">导出</el-button>
      </el-space>
    </el-card>
    <el-card class="mt-16px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="deviceId" label="设备编号" min-width="180" />
        <el-table-column prop="deviceName" label="设备名称" min-width="180" />
        <el-table-column prop="hardwareId" label="订单号" min-width="180" />
        <el-table-column prop="errorReason" label="故障货道" min-width="180" />
        <el-table-column prop="time" label="上报时间" min-width="180" />
        <el-table-column prop="status" label="操作状态" min-width="180" />
        <el-table-column prop="action" label="操作人员" min-width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-16px flex justify-end">
        <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          layout="prev, pager, next"
          background
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from "vue";

const params = ref({});
const tableData = ref([
  {
    deviceId: "123456",
    deviceName: "设备1",
    hardwareId: "123456",
    errorReason: "故障原因",
    time: "2024-01-01 10:00:00",
    status: "已处理",
    action: "张三",
  },
]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(1000);

const handleSearch = () => {
  console.log(params.value);
};
</script>

<style lang="scss" scoped></style>
